<template>
	<view class="containerbox bgc-white">
		<uv-navbar :title="detail.course?.name" auto-back placeholder />
		<view>关卡{{detail.sort}}:{{detail.title}}</view>
		<scroll-view scroll-y class="containerbox relative">
			<!-- <text >{{detail.content}}</text> -->
			<!-- <editor id="editor" read-only selectable class="containerbox px-30"></editor> -->
			<!-- <textarea :value="detail.content" auto-height disabled></textarea> -->
			<view>
				<!-- <text class="mr-10" v-for="(word, index) in words" :key="index">{{ word }}</text> -->
				<text style="display: inline-block;" v-for="(word, index) in words" :key="index">{{ word }}</text>
				<!-- <text v-for="(word, index) in words" :key="index" :style="{ whiteSpace: word === '\\n' ? 'pre' : 'pre-wrap' }">{{ word }}</text> -->
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { getArticleDetail_api } from '@/common/apis/course'
import { onLoad } from "@dcloudio/uni-app"
import { computed, onMounted, ref } from 'vue'

const detail = ref({})
const articleRef = ref()
onLoad(async ({rankId}) => {
	detail.value = await getArticleDetail_api({id: rankId, terminal: 'applet'})
}) 

onMounted(() => {
	const that = this
	// uni.createSelectorQuery().select('#editor').context(function (res) {
	//     articleRef.value = res.context
	// 	setTimeout(() => {
	// 		articleRef.value.setContents({
	// 			html: detail.value.content,
	// 			success: function () {
	// 				console.log('设置初始内容成功');
	// 			  },
	// 			  fail: function (err){
	// 				  console.log('设置初始内容成功2', err);
	// 			  }
	// 		})
	// 	}, 100)
	// }).exec()
})

const words = computed(() => {
	// const wordsArray = detail.value.content.split(/[\s,.]+/);
	// return wordsArray.map(word => {
	// 	if(word == "↵"){
	// 		console.log('进来了')
	// 		return "\n"
	// 	} else{
	// 		return word
	// 	}
	// 	// return word === "\\n" ? "\n" : word
	// })
	
	// console.log(detail.value.content)
	// // 将文本按照空格、逗号、句号等分隔成单词数组
	// // const wordsArray = detail.value.content.split(/[\s,.]+/);
	// // const wordsArray = detail.value.content.split(/\s+|(?=[^\w\s])/);;
	// // // 替换换行符
	// // return wordsArray.map(word => word === "<div></div>" ? "\n" : word);
	// // return wordsArray.map(word => word === "\\n" ? "\n" : word);
	
	
	// const replacedText = detail.value.content.replace(/<div><\/div>/g, '<div-div-placeholder>');
 //  // 将文本按照空格和标点符号分割成单词数组
	// const wordsArray = replacedText.split(/\s+|(?=[^\w\s])/);
 //  // 替换占位符为 <div></div>
	// return wordsArray.map(word => word === '<div-div-placeholder>' ? '<div></div>' : word);
	
	// let wordsArray = []; // 单词数组
	//   let currentWord = ''; // 当前单词
	//   let inDivTag = false; // 是否在 <div></div> 中

	//   // 遍历文本
	//   for (let i = 0; i < detail.value.content.length; i++) {
	// 	// 判断当前字符是否为 < 或 >
	// 	if (detail.value.content[i] === '<' || detail.value.content[i] === '>') {
	// 	  // 判断是否处于 <div></div> 标签中
	// 	  if (detail.value.content[i] === '<') {
	// 		inDivTag = true;
	// 	  } else {
	// 		inDivTag = false;
	// 	  }
	// 	  // 将当前单词加入单词数组，并重置当前单词
	// 	  if (currentWord.trim() !== '') {
	// 		wordsArray.push(currentWord.trim());
	// 		currentWord = '';
	// 	  }
	// 	  // 将 <div></div> 作为一个整体加入单词数组
	// 	  wordsArray.push(detail.value.content.substring(i, detail.value.content.indexOf('>', i) + 1));
	// 	  // 更新索引位置
	// 	  i = detail.value.content.indexOf('>', i);
	// 	} else {
	// 	  // 继续构建当前单词
	// 	  currentWord += detail.value.content[i];
	// 	}
	//   }

	//   // 将最后一个单词加入单词数组
	//   if (currentWord.trim() !== '') {
	// 	wordsArray.push(currentWord.trim());
	//   }

	//   return wordsArray;
	  
	  
	  // 将文本按空格和标点符号分割成单词数组
	        let wordsArray = detail.value.content.split(/(\s+|[^\w\s])/).filter(word => word.trim() !== '');
	  
	        // 将每个单词或符号都作为一个单独的 <text> 标签包裹
	        let textNodes = [];
	        for (let word of wordsArray) {
	          // 判断是否是 <div></div>，如果是则作为一个整体添加到数组中
	          if (word === '<div></div>') {
	            textNodes.push(`<text>${word}</text>`);
	          } else {
	            // 否则将每个单词或符号都作为一个单独的 <text> 标签包裹
	            let characters = Array.from(word);
	            characters.forEach(char => textNodes.push(`<text>${char}</text>`));
	          }
	        }
	  
	        return textNodes.join('');
})

function handleLongTap(e) {
	console.log(articleRef.value.getSelectionText())
	// articleRef.value
	// 选择单词
	uni.chooseText({
		success: (res) => {
			console.log(res)
	        // const selectedText = res.text
	        // // 将选中的单词传递给父组件
	        // this.$emit('textlongpress', selectedText)
		}
	})
}
</script>

<style lang="scss" scoped>
</style>